<template>
    <div class="reportForm">
        <!-- 头部饼图 -->
        <div class="headerBox">
            <div v-for="(item, index) in list" :key="index" class="headerBoxItem">
                <div>{{ item.name}} <span class="subfix" ></span> </div>
                <div :id="'echarts'+index"></div>
            </div>
        </div>
    </div>
</template>

<script>
/* eslint-disable */ 
import {getUserAsset} from '../api'
export default {
    name:"reportForm",
    data(){
        return {
            list:[],
        }
    },
    mounted(){
        this.getData()
    },
    methods:{
        /*获取所有数据 */
        getData(){
             getUserAsset().then(res=>{
                this.list = res
                res&&res.length?res.forEach((element,index) => {
                    this.setBin(index,element)
                }):''
            })
        },
        /**设置饼图 */
        setBin(index,element){
            let arr = ['资产总数','资产总价值','维修总花费','报失总数',]
            let  option = {
                color:['#1890FF','#FF2D55',],
                legend: {
                    orient: 'horizontal',
                    icon: 'circle',
                    bottom:0,
                    left: 0,
                    textStyle:{
                        width:'50%'
                    },
                    width :'200px',
                    data:element.status&&element.status.length?element.status.map(item=>{
                            return item.status_name
                    }):[]
                },
                series: [
                    {
                        type: 'pie',
                        radius: [47, 57],
                        center: ['50%',96],
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            formatter : [
                                    `{a|${arr[index]}}`,
                                    `{b|${element.status[0].status}}`
                                ].join('\n'),
                            rich:{
                                a: {
                                    color:'rgba(174, 174, 178, 1)',
                                    lineHeight:30,
                                    fontSize: 14,
                                    fontWeight:400
                                },
                                b: {
                                    color: 'rgba(16, 16, 16, 1)',
                                    fontSize: 20,
                                    fontWeight:600
                                },
                            }
                        },
                        labelLine: {
                            show: false,
                            
                        },
                        data:element.status&&element.status.length?element.status.map(item=>{
                            return {value:item.status,name:item.status_name}
                        }):[]
                    }
                ]
            };
            this.$nextTick(()=>{
                let echarts = this.$echarts.init(document.getElementById('echarts'+index))
                echarts.setOption(option);
            })
        }
    }
}
</script>

<style lang='stylus'>
.reportForm
    .headerBox 
        display flex 
        flex-wrap wrap
        margin-top 10px
        >div:last-child 
            margin-right 0
        .headerBoxItem
            width: 267px;
            height: 253px;
            border-radius: 4px;
            margin-right 15px
            background-color: rgba(255, 255, 255, 1);
            font-family: Roboto;
            padding 20px 30px 30px 30px
            margin-bottom 10px
            display flex
            flex-direction column
            >div:first-child 
                line-height : 24px;
                color: rgba(16, 16, 16, 1);
                font-size: 16px;
                font-weight 600
                padding-bottom 7px
                border-bottom  1px solid rgba(242, 242, 242, 1);
                .subfix
                    color: rgba(147, 147, 147, 1);
                    font-size: 10px;
            >div:last-child 
                flex 1
    .twoPart
        background-color #fff
        padding 24px 0 28px 0
        margin-bottom 10px
        >div:first-child   
            line-height : 24px;
            color: rgba(16, 16, 16, 1);
            font-size: 16px;
            font-weight 600
            padding-bottom 12px 
            margin 0 37px 6px 37px
            border-bottom 1px solid rgba(240, 240, 240, 1);
        .item 
            display inline-flex
            flex-direction column
            align-items center
            padding 24px 0 18px 0
            width: 217px;
            position relative
            height: 101px;
            margin 64px 21px 0 37px
            border-radius: 2px;
            background-color: rgba(255, 255, 255, 1);
            text-align: center;
            box-shadow: 0px 0px 10px 0px rgba(221, 221, 221, 0.4);
            border: 1px solid rgba(255, 255, 255, 0);
            >img 
                width: 53px;
                position absolute
                top -37px 
                left 83px
                height: 53px;
                border-radius 50%
            >span
                line-height : 20px;
                height 20px
                color: rgba(64, 64, 64, 1);
                font-weight 600
            >div 
                line-height : 20px;
                color: rgba(130, 130, 130, 1);
                margin-top 8px
                display flex
                align-items center
                >span 
                    overflow: hidden;
                    height 15px
                    line-height 15px
                    padding 0
                    margin 0
                    text-overflow:ellipsis;
                    white-space: nowrap;
                    text-align center
                    display inline-block
                >span:first-child 
                    width 25px
                    color #00BB7A    
                >span:last-child 
                    width 75px
                    color #FF9502 
    .onePart
        height 360px
        width 100%
        position relative
        background-color #fff
        margin-bottom 10px
        >div:first-child 
            height 100%
            width 100%
            padding-top 25px
        .item 
            width 127px
            margin 30px 12px 0 0
            display inline-block
            >div:first-child 
                width 80px
                height 80px
            >div:last-child 
                color: rgba(89, 89, 89, 1);
                font-size: 12px;
                width 80px
                margin-top 7px
                text-align: center;
    .shouwMoare
        position absolute 
        top 20px
        right 34px 
        display flex 
        align-items center
        >div:first-child
            color: rgba(16, 16, 16, 1);
            font-size: 14px;
        .btn 
            cursor pointer
            margin 0 7px 0 14px
            border-radius: 3px 
            height: 30px;
            >span
                width: 60px;
                display inline-block
                line-height: 28px;
                text-align: center;
                font-size: 12px;
                
            .whiteC 
                color: rgba(0, 0, 0, 0.65);
                background-color: rgba(255, 255, 255, 1);
                border: 1px solid rgba(225, 225, 225, 1);
            .blueC 
                color #fff
                background-color: rgba(77, 134, 255, 1);
                border 1px solid ra(255,255,255,0)
        .el-button
            width: 74px;
            padding 0
            line-height : 28px;
            margin-left 22px
            text-align center
            display inline-block
            border-radius: 50px;
            background-color: rgba(255, 255, 255, 0);
            color: rgba(49, 150, 250, 1);
            font-size: 12px;
            border: 1px solid rgba(49, 150, 250, 1);
            >span  
                font-size 12px!important

</style>